<template>
	<div>
		
		
		
			<el-form ref="ruleForm" :rules="rules" :model="form" label-width="80px">
				<el-form-item label="名称" prop="name">
					<el-input v-model="form.name" placeholder="请输入名称"></el-input>
				</el-form-item>
				<el-form-item label="图片" prop="images">
					<el-input v-model="form.images" v-if="false"></el-input>
					<upload ref="upload" :limit="1" :tempImg="form.images"></upload>
				</el-form-item>
				<el-form-item label="商品路径">
					<el-input v-model="form.url" placeholder="/pages/index/index?id=7"></el-input>
				</el-form-item>
				<el-form-item label="排序">
					<el-input v-model="form.index"></el-input>
				</el-form-item>
				<el-form-item label="">
					<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
				</el-form-item>
			</el-form>
			
		
	
	</div>
</template>

<script>
	import upload from '@/components/upload.vue';
	import bread from '@/components/bread.vue'
	export default {
		components: {
			upload,
			bread
		},
		data() {
			return {
				form: {
					id:"",
					name: '',
					index:1,
					url:"",
					images: []
				},
				rules: {
					name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					},],
					images: [{
						required: true,
						message: '请选择图片',
						trigger: 'blur'
					}, ],


				}

			}
		},
		created() {
		  if(this.$route.query.id){
		  	   this.jiazai(this.$route.query)
		  }
		},
		methods: {
			jiazai(e){
				this.axios.post("/api/index/findBanner", {
					id: e.id
				}).then(res => {
					this.form=res;
				}).catch(error => {
				
				})
			},
			submitForm(formName) {
				this.form.images = this.$refs.upload.imageListString;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.axios.post("/admin/user/addBanner", {
							name: this.form.name,
							images: this.form.images,
							id:this.form.id,
							index:this.form.index,
							url:this.form.url,
						}).then(res => {
							this.$message.success({
								message: "添加成功",
								onClose: (res) => {
									this.$router.replace("/banner")
								}
							})
						}).catch(error => {

						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
		}
	}
</script>

<style>
</style>
